<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 左侧 -->
        <template #left>
          <i class="el-icon-info" />
          <span>总记录数: 200</span>
        </template>
        <!-- 右侧 -->
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/excel')">excel导入</el-button>
          <el-button type="danger" size="small" @click="derive">excel导出</el-button>
          <el-button type="primary" size="small" @click="addDialog">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 表格内容 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column width="60" label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <!-- 头像 -->
          <el-table-column label="头像">
            <template #default="{row}">
              <el-image class="imgPic" :src="row.staffPhoto">
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="{row }">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{row}">
              {{ formattimeOfEntry(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="editEmploy(row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="fetchLook(row)">查看</el-button>
              <el-button type="text" size="small" @click="editRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="fetchDelEmploy(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="params.page"
          :page-size="params.size"
          :cur-id="curId"
          @current-change="pageChange"
        />
      </div>

    </div>
    <!-- 弹框 -->
    <add-employee
      :cur-id="curId"
      :visible="visible"
      @close-dialog="closeDialog"
      @updata-list="fetchList"
      @removecurID="removecurID"
    />
    <!-- 分配角色 -->
    <assign-role
      :show-role-dialog="showRoleDialog"
      :cur-id="curId"
      @close-role-dialog="closeRoleDialog"
    />
  </div>
</template>

<script>
import AddEmployee from './component/add-employee.vue'
import AssignRole from './component/assign-role.vue'
import { getEmployeeList, delEmployee } from '@/api/employees'
import dayjs from 'dayjs'
import { getExportData } from '@/utils/excel'
export default {
  name: 'Employee',
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        size: 10
      },
      total: 0,
      visible: false,
      curId: '',
      showRoleDialog: false
    }
  },
  // 打开网页 加载表格内容
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      // 调用接口
      const { rows, total } = await getEmployeeList(this.params)
      this.list = rows
      this.total = total
    },
    // 修改聘用形式
    formatEmployment(value) {
      const map = {
        1: '正式',
        2: '不正式',
        3: '王牌'
      }
      return map[value]
    },
    // 修改入职时间
    formattimeOfEntry(value) {
      return dayjs(value).format('YYYY - MM - DD')
    },
    // 改变页数
    pageChange(page) {
      // console.log(page)
      // 将当前页码赋值给当前的最新页码
      this.params.page = page
      // 重新渲染页面
      this.fetchList()
    },
    // 显示表单
    addDialog() {
      this.visible = true
    },
    // 隐藏表单
    closeDialog() {
      this.visible = false
    },
    // 删除当前数据
    fetchDelEmploy(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除带有id的内容
        await delEmployee(id)
        // 重新刷新页面
        this.fetchList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch()
    },
    // 点击编辑当前数据信息传 id
    editEmploy(id) {
      this.visible = true
      this.curId = id
      console.log(this.curId)
    },
    // 清空id
    removecurID() {
      this.curId = ''
    },
    // 导出
    derive() {
      import('@/vendor/Export2Excel').then(async excel => {
        // excel表示导入的模块对象
        const res = await getEmployeeList(this.params)
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头header 必填 要求是一个数组
          data: data, // 表格数据body 要求是一个二维数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 点击查看
    fetchLook(row) {
      console.log(row)
      this.$router.push({
        path: '/employeedetail',
        query: {
          id: row.id
        }
      })
    },
    // 点击分配角色显示弹窗
    editRole(id) {
      this.showRoleDialog = true
      this.curId = id
      console.log(this.curId)
    },
    // 隐藏分配角色弹窗
    closeRoleDialog() {
      this.showRoleDialog = false
    }
  }

}
</script>

<style lang="scss" scoped>
.pagination{
width: 400px;
padding-left: 600px;
padding-top: 20px;
}
.imgPic{
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

</style>
